<template>
  <div class="teach">
    <p class="align">教师功底</p>
    <div class="tea1">
      <p>（1）学科知识：</p>
      <div class="red">
        <p class="buy">刷题次数：<input type="text" v-model="number" />次</p>
      </div>
      <p>（2）演讲能力：</p>
      <div class="red">
        <p class="buy">外出演讲次数：<input type="text" v-model="speech" />次</p>
        <p class="buy">演讲比赛分数：<input type="text" v-model="rate" />分</p>
      </div>
      <p>（3）课程质检：</p>
      <div class="red">
        <p class="buy">转化率：<input type="text" v-model="perfect" />%</p>
      </div>
      <p>（4）教师资格证：</p>
      <div class="red">
        <p class="buy">
          所教科目教师资格证：
          <input type="radio" v-model="aaa"  name="gan" value="1" id="yes" class="ra" @change="get" /><label for="y"
            >有</label
          >
          <input type="radio" v-model="aaa" name="gan" value="2" id="no" class="ra" @change="get" /><label for="w"
            >无</label
          >
        </p>
      </div>
      <p>（5）课程录制：</p>
      <div class="red">
        <p class="buy">公开课数量：<input type="text" v-model="clanumber" />节</p>
      </div>
      <p>（6）授课能力：</p>
      <div class="red">
        <div class="buy">
          <input type="radio" v-model="teaability" name="gan1" value="1" id="yes" class="ra" @change="get"/><label
            for="r"
            class="r"
            >演讲师</label
          >
          <input type="radio" v-model="teaability" name="gan1" value="2" id="no" class="ra" @change="get"/><label
            for="r"
            class="r"
            >大班演讲师</label
          >
          <input type="radio" v-model="teaability" name="gan1" value="3" id="no1" class="ra" @change="get"/><label
            for="r"
            class="r"
            >小班演讲师</label
          >
        </div>
      </div>
      <div class="jifen">
        <button @click="btn">提交修改</button>
      </div>
    </div>
    
    <section class="wmassageMask" v-show="writeMessageShow">
      <div class="tk">
        <p>成功</p>
        <p class="border"></p>
        <button @click="qd">确定</button>
      </div>
    </section>

  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Teach",
  components: {},
  data() {
    return {
      number: "",
      speech: "",
      rate: "",
      perfect: "",
      clanumber: "",
      aaa:"",
      teaability:'',
      writeMessageShow: false
    };
  },

  methods: {
    get(){
      console.log(this.aaa)
    },
    qd(){
      this.writeMessageShow = !this.writeMessageShow
    },
    btn() {
      console.log(11);
      let that = this;
      axios
        .post("/system/foundation", {
          teaid:localStorage.getItem("ids"),
          number:that.number,
          rate: that.rate,
          speech: that.speech,
          perfect: that.perfect,
          clanumber: that.clanumber,
          certificate:that.aaa,
          teaability:that.teaability
        })
        .then(function (res) {
          console.log(res);
          that.writeMessageShow = true
        })
        .catch(function (err) {
          console.log(err);
        });
    },
  },
  created() {
    let that = this;
    axios
      .post(
        "/system/teacher",
         {id:localStorage.getItem("ids")}
      )
      .then(function (res) {
        console.log(res.data.data);
        that.number = res.data.data.number;
        that.speech = res.data.data.speech;
        that.rate = res.data.data.rate;
        that.perfect = res.data.data.perfect;
        that.clanumber = res.data.data.clanumber;
        that.aaa = res.data.data.certificate
        that.teaability=res.data.data.teaability
      })
      .catch(function (err) {
        console.log(err);
      });
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="css" scoped>
.teach{position: relative;}
.wmassageMask{position: fixed;top: 0;bottom: 0;left: 0;width: 100%;background-color: rgba(0,0,0,.3);z-index: 101;}
.tk{width: 80%;margin: 10% 0;background-color: #ccc;position: absolute;top:12rem;left:10%;background-color: #fff;border-radius: 10px;}
.tk button{color: #278ED4;width: 100%;padding: 1rem;border: 0;background-color: #fff;border-radius: 10px;margin-bottom:0;}
.tk p{width: 100%;padding: 2rem 0;text-align: center;}
.tk p.border{border-top:1px solid #ccc;padding:0;width:100%;height: 1px;}
.align {
  width: 100%;
  text-align: center;
  color: #f00;
  font-size: 1rem;
  line-height: 2rem;
}
.tea1,
.red {
  width: 90%;
  margin: 0 auto;
}
.red p {
  line-height: 2rem;
}
select {
  width: 50px;
  text-align: center;
  outline: none;
  border: #d62c32;
  border-bottom: 2px solid #d62c32;
}
.buy {
  display: flex;
  justify-content: flex-start;
  font-size: 0.9rem;
}
button {
  width: 60%;
  line-height: 2rem;
  border-radius: 15px;
  background: #d62c32;
  border: 1px solid #d62c32;
  color: beige;
  outline: none;
  margin-bottom: 1rem;
}
.jifen {
  width: 80%;
  margin: 10px auto;
  display: flex;
  justify-content: space-evenly;
}
.jifen p {
  margin-top: 15px;
  color: #a4a4a4;
  font-size: 0.8rem;
}
input {
  margin: 5px 4px;
  width: 40px;
  border: 0;
  border-bottom: 1px solid #000;
  outline: none;
}
.ra {
  margin: 10px 4px;
  width: 15px;
}
.r {
  margin: 5px 0;
}
</style>
